<template>
  <div class="UserManagementList">
    <el-card class="searchBox">
      <div class="one">
        <el-input
          v-model="id"
          placeholder="请输入ID"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
        <el-input v-model="name" placeholder="请输入昵称"></el-input>
        <el-input
          v-model="phone"
          placeholder="请输入手机号"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
        ></el-input>
        <el-select v-model="stateVal" placeholder="请选择审核状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="withdrawalTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-button class="btn" @click="rechargeWithdrawalAuditBtn"
          >查询</el-button
        >
      </div>

      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="requestTime" label="请求时间"> </el-table-column>
        <el-table-column prop="userId" label="用户ID"> </el-table-column>
        <el-table-column prop="name" label="用户昵称"> </el-table-column>
        <el-table-column prop="withdrawalAmount" label="提现金额">
        </el-table-column>
        <el-table-column prop="withdrawalStatus" label="提现状态">
        </el-table-column>
        <el-table-column prop="rechargeFunction" label="充值功能">
        </el-table-column>
        <el-table-column prop="state" label="操作">
          <!-- 通过拒绝按钮 -->
          <template slot-scope="scope">
            <!-- <el-button
              size="mini"
              @click="handleEdit(scope.row)"
              v-if="scope.row.withdrawalStatus == '待审核'"
              >提现中</el-button
            > -->
            <el-button
              size="mini"
              type="danger"
              @click="agreeBtn(scope.row)"
              v-if="scope.row.withdrawalStatus == '待审核'"
              >同意</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              v-if="scope.row.withdrawalStatus == '待审核'"
              >驳回订单</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="address" label="封禁管理">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="rechargeWithdrawalBanBtn(scope.row)"
              v-if="scope.row.ban == 0"
              >封禁提现</el-button
            >
            <el-button
              size="mini"
              type="success"
              @click="rechargeWithdrawalUnsealBtn(scope.row)"
              v-if="scope.row.ban == 1"
              >解封提现</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import {
  rechargeWithdrawalAudit,
  rechargeStateHandel,
  rechargeWithdrawalBan,
} from "@/api/AuditManagement";
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loading: true,
      id: "",
      name: "",
      phone: "",
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      withdrawalTimeValStartDate: "",
      withdrawalTimeValEndDate: "",
      withdrawalTimeVal: "", //时间日期
      options: [
        {
          value: "0",
          label: "未审核",
        },
        {
          value: "1",
          label: "已通过",
        },
        {
          value: "2",
          label: "已拒绝",
        },
      ],
      stateVal: "", //状态选择 0.未审核 1.已审核 2.已拒绝
      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
    };
  },
  methods: {
    //列表
    rechargeWithdrawalAudit() {
      this.loading = true;
      rechargeWithdrawalAudit({
        page: this.page,
        pageSize: this.pageSize,
        startDate: "",
        endDate: "",
        id: "",
        name: "",
        phone: "",
        state: "", //状态 0.未审核 1.已审核 2.已拒绝
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //查询
    rechargeWithdrawalAuditBtn() {
      if (this.page !== 1) {
        this.page = 1;
      }
      this.loading = true;

      rechargeWithdrawalAudit({
        page: this.page,
        pageSize: this.pageSize,
        startDate: this.withdrawalTimeValStartDate
          ? this.withdrawalTimeValStartDate
          : "",
        endDate: this.withdrawalTimeValEndDate
          ? this.withdrawalTimeValEndDate
          : "",
        id: this.id,
        name: this.name,
        phone: this.phone,
        state: this.stateVal, //状态 0.未审核 1.已审核 2.已拒绝
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //封禁
    rechargeWithdrawalBanBtn(row) {
      this.$confirm("此操作将封禁该用户的提现功能, 是否继续?", "封禁提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rechargeWithdrawalBan({
            id: row.id,
            ban: 0,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "封禁成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消封禁",
          });
        });
    },
    //解封
    rechargeWithdrawalUnsealBtn(row) {
      this.$confirm("此操作将解封该用户提现功能, 是否继续?", "解封提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rechargeWithdrawalBan({
            id: row.id,
            ban: 1,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "解封成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解封",
          });
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    //同意
    agreeBtn(row) {
      this.$confirm("此操作将同意该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rechargeStateHandel({
            state: 1,
            id: row.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "同意成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消同意订单",
          });
        });
    },
    handleDelete(row) {
      this.$confirm("此操作将驳回该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rechargeStateHandel({
            state: 2,
            id: row.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "驳回成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消驳回",
          });
        });
    },
    getList() {
      this.loading = true;

      rechargeWithdrawalAudit({
        // page: this.page,
        // pageSize: this.pageSize,
        // startDate: this.withdrawalTimeValStartDate,
        // endDate: this.withdrawalTimeValEndDate,
        // id: this.id,
        // name: this.name,
        // phone: this.phone,
        // state: this.stateVal, //状态 0.未审核 1.已审核 2.已拒绝
        page: this.page,
        pageSize: this.pageSize,
        startDate: this.withdrawalTimeValStartDate
          ? this.withdrawalTimeValStartDate
          : "",
        endDate: this.withdrawalTimeValEndDate
          ? this.withdrawalTimeValEndDate
          : "",
        id: this.id,
        name: this.name,
        phone: this.phone,
        state: this.stateVal, //状态 0.未审核 1.已审核 2.已拒绝
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //时间
    focus(time) {
      if (!this.withdrawalTimeVal) {
        this.withdrawalTimeVal = [];
      }
      this.withdrawalTimeValStartDate = this.withdrawalTimeVal[0];
      this.withdrawalTimeValEndDate = this.withdrawalTimeVal[1];
    },
  },
  created() {
    this.rechargeWithdrawalAudit();
  },
};
</script>

<style lang="less" >
.UserManagementList {
  margin: 30px;
  height: 100%;
  .searchBox {
    .one {
      display: flex;
      margin-bottom: 20px;
      .el-input {
        width: 230px;
        margin-right: 20px;
      }
      .el-select {
        margin-right: 20px;
      }
      .el-button {
        margin-left: 20px;
        height: 40px;
      }
      p {
        margin-right: 10px;
      }
    }
  }
  .el-table {
    margin-top: 30px;
  }
}
</style>